import React from 'react'
import { useEffect,useState } from 'react'
import axios from 'axios'
import { Link,Route,Switch } from 'react-router-dom/cjs/react-router-dom'
import './search.css'
import SearchList from './SearchList'
export default function Search(props) {
    let [str,setStr] = useState('')
    let [ hotlist,setHotlist ] = useState([])
    let [ searchlist,setSearchList ] = useState([])
    let [isShow,setisShow] = useState(false)
  useEffect( () => {
    axios.get('/api/v1/search/hot-words').then(res => {
        setHotlist(res.data.hot)
    })
  },[])
  const input = (e) =>{
    setStr(e.target.value)
  }
  const search = (e) => {
    if( e.keyCode == 13){
        axios.get(`/api/v1/search/suggest?keyword=${str}`).then(res => {
        // console.log(res);
        setSearchList(res.data.data)
        setisShow(true)
    })
    }
  }
  const tz = (name) => {
    props.history.push(`/searchlist/${name}`)
  }
  return (
    <div>
        
        <div className='search-box'>
            <div className='search-f'>
                <span></span>
                 <input type="text" value={str} onKeyUp={search} onChange={input} placeholder='请输入搜索关键字' />
            </div>
            <span className='qx' onClick={() => props.history.push('/index')}>取消</span>
        </div>
        <div className='hot' style={{display : isShow ? 'none' : 'block' }}>
            <p className='text'>热门搜索</p>
            {
                hotlist.map((item,index) => {
                    return <span key={index}>
                        <Link to={`/searchlist/${item}`}>
                            {item}
                        </Link>
                    </span>
                })
            }
        </div>
        <div style={{display : isShow ? 'block' : 'none' }}>
            <ul>
                {
                    searchlist.map((item,index) => {
                        return <li className='searchlist1' key={index}>
                            <p onClick={() => tz(item)}>{item}</p>
                            
                        </li>
                    })
                }
            </ul>
        </div>
        
    </div>
  )
}
